<!--测试带名称空间的模块化-->
<template>
    <div>
        <h1>state：{{test.name}}</h1>
        <h1>getters：{{computeName}}</h1>
        <div>
            <span>mutations：</span>
            <button @click="changeName"> 解构修改数据</button>
            <button @click="clickChangeName"> 提交修改数据</button>
        </div>
        <div>
            <span>actions：</span>
            <button @click="loadName"> 加载数据</button>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapGetters, mapMutations, mapState} from "vuex"

    export default {
        name: "Test",
        mounted() {
            console.log(this);
        },
        computed: {
            ...mapState(["test"]),
            ...mapGetters("test", ["computeName"]),
        },
        methods: {
            clickChangeName() {
                this.$store.commit("test/changeName", {
                    a: 1,
                    b: 2
                }, {root: true})
            },
            ...mapMutations("test", ["changeName"]),
            ...mapActions("test", ["loadName"]),
        },
    }
</script>

<style scoped>

</style>
